#tutoriales de diseño

[formaciongrafica]

Tercera entrega, de la serie de 3, donde presentamos el flujo de trabajo para el prototipado de interfaces de usuario con Material Design 3, empleando los recursos que la última versión de este framework nos ofrece para utilizar en Figma. Rápido, aprenderás a generar el UI kit, estilos de colores, estilos de textos, tamaños de frames, retículas y otros recursos en Figma. Indispensable si quieres trabajar profesionalmente en ambos entornos. A continuación, te comparto los enlaces la primera y segunda entrega de esta serie:

Primer contacto con Material Design 2, aspectos relevantes, componentes y más.

Primer contacto con Material Design 3, aspectos fundamentales, componentes, y más.

Tutorial completo, aquí: https://www.formaciongrafica.net/blog/tutoriales-online/uid/el-flujo-en-figma-con-material-design-3/

[iron-marco-blog]

Domina la Programación desde Cero: Descubre Pseudocode, tu Puerta de Entrada al Mundo de la Codificación

Pseudocode es una aplicación de software diseñada para ayudar a aprender y enseñar programación a través del uso de un pseudocódigo simplificado en dispositivos móviles. Funciones y Propósito de Pseudocode: Aprendizaje de Programación: Es ampliamente utilizado en entornos educativos, especialmente en instituciones académicas y cursos introductorios de programación. Ayuda a los estudiantes a…

[mochidochi-rps]

Sabias que… Foroactivo

Ahora es posible instalar fuentes de Google desde el panel de Foroactivo Colores & CSS - Colores, aunque solo se podrán agregar 3 tipos: Fuente Título, Fuente Principal y Fuente códigos, otras fuentes deberán de ser agregadas tradicionalmente. Aquí dejo el link con la información más completa.

El formulario de ingreso a nuestras cuentas de Foroactivo ahora cuenta con el “ojito” con el que podemos ver el contenido del campo de contraseña para verificar antes de ingresar.

Antiguamente si queríamos los foros separados en cuadrículas en lugar de los clásicos, debíamos de ver tutoriales y aprender algo de códigos, con esta actualización solo necesitarás activar una opción para disfrutar este diseño que además puedes personalizar si sabes de códigos desde su plantilla. Aquí dejo el link con la información más completa.

Pronto será navidad y nada como vestirnos para las fechas, les dejo las Astucias para decorar sus foros para eventos especiales: Navidad.

( ͡❛ ₃ ͡❛)👌

[angeldecuir]

Cyberpunk By Paweł Latkowski

Visit my blog for more inspiration 

[durancodes]

Skin 004: Wicked Hearts

No disponible — Skin avanzada

Hay cosas que van dentro del paquete de skin avanzada que no fueron utilizados en esta skin, jeje. Agradezco a la administración de @love-is-wicked que me hayan dado total libertad a la hora de hacer el diseño y la paciencia a la hora de responder las miles de preguntas que les hacía jajaja

A pesar de todos los contratiempos (?) Debo decir que estoy muy a gusto con el trabajo que hice para este foro. Fue en cierto tiempo record, pero se logró.

Sólo quiero mencionar que yo sólo hice la skin. Se me encargó este trabajo y lo hice, así que, pediré que no me metan en el problema.

El gráfico de la portada es el único que se le proporcionó al foro de mi parte. El resto de imágenes fueron editadas por ellos mismos.

Agradezco a cada uno de los tutoriales de astucias entregados tanto por @necromancercoding como asistencia de foroactivo, @mrd-design y Monomer.

@elalmacen-rp

[rolmaniacos]

¿Alguien sabe por donde puedo empezar?// Si te refieres a codes, pues ve a w3school y parte con html, sino busca tutoriales de html en youtube.

Como última opción busca a alguien que te enseñe lo básico, si es que conoces a alguien del lado de los codes.

También debes saber poner tus ideas en papel, haz mockups de lo que quieres antes de intentar escribir el codigo.

Aprender algo de teoría del color, diagramación y diseño te puede ayudar a hacer realidad tus ideas.

Y no olvides saber algo de accesibilidad, un buen diseño es el que cualquiera puede leerlo, entenderlo y es intuitivo de usar.

Es un buen inicio. B⊕REDOM.

[whitealems]

⟢ 𝐍𝐀𝐕𝐈𝐆𝐀𝐓𝐈𝐎𝐍 .ᐟ

ઇଓ ale matías .ᐟ visual storyteller. amante de las presentaciones. super fan de canva. infografías y carteles. gradientes suaves. coleccionista de moodboards. desing is my love language.

00. INTRODUCCIÓN.

-- ¿Quién soy y qué hago?

01. DISEÑO.

-- Recursos y elementos para diseñar.

02. MIS TRABAJOS.

-- Diseños que he creado.

03. GUÍAS.

-- Estéticas.

04. VIDEOS

-- Tutoriales

© whitealems 2025 ★ ┆ todos los diseños son de mi autoría. por favor no los copies o repostees en ninguna otra red social o plataforma.

[3daveprints]

Today's publication is one that I have been preparing for a long time and I am very excited.

Here's a figure of Nicole from Sonic Resonance AU designed by @angstsuccer (check out their account to find out more!).

I feel very proud to be able to say that I contributed my grain of sand to that AU with Nicole's design, and for that reason I also wanted to make a 3D model. Since my modeling skills aren't enough (although I hope they will be in the future), I use as a base the design of the Archie comics done by mikomagallona at Sketchfab (link below). Ironically, I took the classic Nicole design, which looks less like the Resonance than the modern one, which also has a model buuuut I didn't see it. Oops.

I've learned a lot during the process, in terms of modeling and painting. Although for most elements I took existing models, Nicole's jacket was made exclusively by me (finally applying my knowledge of hours of Blender tutorials) and I really like how well it fit. That's why there is an image only of it, I wanted to show it to you (?)

As for painting, it is the first time I painted a figure, and although I have spent many hours, I really liked the experience. It's not going to be the last one I paint (in fact, I'm already painting more-). As you can see, the eyelashes were very fragile and broke before they could be painted :'c

This is the happiest time I'm with something I've printed and that's why I'm also very excited to show it. I hope you like it at least one thousandth of what I like <3

Classic Nicole by mikomagallona: https://sketchfab.com/3d-models/nicole-the-holo-lynx-classic-e4cfa0c54f474f918f40277fe2bbacfb

Post en español:

La publicación de hoy es una que llevo preparando mucho tiempo y me hace mucha ilusión.

Os presento una figura de Nicole del Sonic Resonance AU diseñado por @angstsuccer (¡echadle un vistazo a su cuenta para saber más!).

Siento mucho orgullo de poder decir que aporté mi granito de arena a ese AU con el diseño de Nicole, y por eso mismo quería también hacerle un modelo 3D. Como mis habilidades de modelado no son suficientes (aunque espero que lo sean en el futuro), me basé en el diseño de los cómics de Archie hecho por mikomagallona en Sketchfab (enlace abajo). Irónicamente cogí el de la Nicole clásica, que se parece menos a la de Resonance que la moderna, que también tiene modelo pero no vi. Upsie.

He aprendido mucho durante el proceso, en cuanto a modelado y pintura. Aunque para la mayoría de elementos cogí modelos ya hechos, la chaqueta de Nicole la hice yo exclusivamente de cero (aplicando al fin mis conocimientos de horas de tutoriales de Blender) y me gusta mucho lo bien que me quedó. Por eso hay una imagen sólo suya, quería mostrárosla (?)

En cuanto a la pintura, es la primera vez que pintaba una figura, y aunque le he echado muchas horas, me ha gustado mucho la experiencia. No va a ser la última que pinte (de hecho, ya estoy pintando más-). Como podréis apreciar, las pestañas eran muy frágiles y se rompieron antes de poder pintarlas :’c

Esta es la vez que más feliz estoy con algo que he impreso y por eso también me hace mucha ilusión mostrarlo. Espero que os guste al menos una milésima parte de lo que me gusta a mí <3

[necromancercoding]

Hola necro! Vengo con una duda por fascinación ya que es el segundo foro que veo tan responsivo ¿Cómo lograste que los subforos de goddess se acomodaran tan bien en Mobile? Harás algún tutorial o lo tienes?

¡Hola anon! Para los skins que tienen subforos así, lo que hago es que el diseño grid que les implemento (recomiendo los tutoriales de Kevin Powell si no saben usar grid: The EASIEST way to get started with CSS GRID, Learn CSS Grid the easy way, Get started with grid WITHOUT being overwhelmed, y tiene otros múltiples videos al respecto en esta playlist), se lo implemento directamente con una regla de media query. Goddess está hecho al revés; ambas opciones son viables, aunque últimamente estoy optando por la primera porque es mucho más eficaz. Básicamente, por defecto tus subforos están organizados uno debajo del otro (como se verán en móvil):

.frBody { display:grid; grid-template-columns:1fr; gap:1rem; }

Y con nuestra media query, establecemos nuestro diseño (retira la / después del arroba, tengo que ponerla para que tumblr no mencione a alguien llamado media 😂):

@/media (min-width:1440px) { #c1 .frBody { grid-template-columns:2fr 1fr; grid-template-rows:20rem 20rem; & .frow:first-of-type { grid-row:1 / 3; } } }

En este ejemplo random, en la categoría 1 tendremos dos columnas (siendo la de la izquierda más grande), y dos filas del mismo tamaño, y nuestro primer .frow va a empezar en la fila 1 y va a terminar en la tres, mientras que los otros dos .frow van a ocupar los otros dos huecos. Pero con grid puedes hacer el diseño que quieras, sobre todo si usas grid-template-areas/grid-area.

Me remito a los tutoriales anteriormente linkeados, fue como yo aprendí en su inicio a usar grid y hace ciertos diseños mucho más sencillos (todos mis tablones y estadísticas hoy en día están diseñadas con grid). También puedes usar el generador de grid, que en mis inicios me ayudó mucho a entender cómo funcionaba grid y cómo crear mis propios grids más tarde.

Dudo mucho que haga un tutorial de grid más que nada porque hay recursos que van a ser muchísimo más completos que lo que yo pueda hacer. Por eso les recomiendo lo que a mí me sirvió para aprender, que creo que es mucho más útil en este caso 💕

[luliloveschocola]

donde puedo aprender a programar?

Ay ermane acá me agarraste porque mucha info no tengo exactamente 😓 pero yo estuve haciendo cursos por Domestika, que justo ahora tiene un descuento enorme en todos sus cursos y tienen el valor de 1200 pesos ARS (andá a saber qué estrategia rara de Marketing hay ahí) y podés verlo por acá y también podés buscar libremente en el sitio, ya que hay muchas cosas de eso ahí. Aunque todo depende qué campo de programación en específico quieras aprender a dominar; Si sabés a qué te querés dedicar, por ejemplo front, back, infra, QA, data engineering, scripting, seguridad, mobile, videojuegos, etc. A partir de ahí vas a ver qué lenguajes, librerías y demás tecnologías se usan para aprender sobre aquello en lo que quisieras especializarte. Dato fundamental: Es importantísimo que sepas inglés. Desde mi experiencia, estoy familiarizada con la creación de desarrollo y diseño web, este campo más o menos lo domino hablando de personalizar la interfaz de las redes como Blogger y acá en Tumblr, aunque yo desde los nueve años estoy metida en ese mundo. Si hablamos de este tipo de programación hay un curso así en la página que mencioné al principio como lo más económico, sino tenés cursos de la UTN, la Da Vinci y entre otros. Pero te llevan gran presupuesto porque todo lo que tiene que ver con programación de por sí es caro. (incluido el equipo que requerís para ejecutar los programas, etc), sumado a que preparar el material lleva mucho tiempo, por eso los cursos de materias más específicas tienen normalmente un coste asociado. En caso de que sea programación de videojuegos y no sabés por dónde empezar, podés intentar haciendo novelas visuales a través de Ren'Py, que es muy amiga de los principiantes que quisieran crear sus propios juegos. Tiene incluso un apartado que explica cómo realizar todo el contenido en sí que lo encontrás acá, y mientras lo vas complementando con tutoriales en YouTube. Luego con el tiempo, a medida que avances en tu aprendizaje, podrías pasarte a un motor más potente como Unity (se ve cierto lenguaje que es C#). Post largo, sí T__T . Pasa que la programación es un mundo denso y complejo y que requiere años de estudio, por ende si te interesa navegar a fondo cómo es, considerá la posibilidad de estudiar la carrera o sino como mencioné, ir de a poquito y aprender fragmentos de la programación en general. Si tenés dudas fíjate en la comunidad de programación de Reddit, por el buscador seguramente encuentres posts que respondan todo lo que tengas en mente. Muchísima suerte y ánimos para vos si querés sumergirte en este mundo!! ♡

[valentine-graphics]

¡Holaaaaa! Acabo de encontrarme con este tumblr y me quedé como ¡Wooaw! Está maravilloso y haces cosas super geniales, ojalá algún día pudiera conseguir hacer algo la mitad de bueno, ¡Que talento el tuyo!

Estoy decidida a ver todos los tutoriales que hagas, mucha suerte y éxito. 💞

¡Hola! Que bonito mensaje, te agradezco mucho <3 Quiero decirte que hace unos años solía decir lo mismo cuando veía a artistas (en esa época donde tenía 0 estudios y ponía pngs en una imagen (?), así que me puse a ver tutoriales y aprender. Seguramente con dedicación lo que hagas va a salir precioso.

La mejor recomendación que puedo darte, además de tutoriales, es ver diseños que te gusten e intentar replicarlos. Ojo, no es para copiar, es para familiarizarte con las herramientas y buscar distintas opciones para llegar a tal resultado. Es como el dibujo; muchos profesionales aconsejan buscar diferentes artistas e intentar dibujar similar a ellos hasta que uno mismo encuentre su propio estilo.

[formaciongrafica]

Segunda entrega, de una serie de 3, donde tomamos primer contacto con Material Design 3 para comprender algunas de sus leyes fundamentales, componentes y a partir de la documentación oficial de este Framework para el diseño de interfaces móviles de usuarios. A continuación, te comparto los enlaces la primera y tercera entrega de esta serie:

Primer contacto con Material Design 2, aspectos relevantes, componentes y más.

El prototipado UI con Material Design 3 en Figma con Material 3 Design Kit y Material Theme Builder.

Tutorial completo, con video de apoyo: https://www.formaciongrafica.net/blog/tutoriales-online/uid/md2-vs-md3-material-design-3/

[liladream557]

Bienvenidos! Soy Lila, tengo 24 años y soy artista idependiente autodidacta Autista😊. En este canal mi meta es lograr publicar diversos contenidos sea: diseño de personajes, cómics de mis personajes favoritos 😍o del cómo es mi vida como autista adulta, videos cortos de animación, tutoriales de cosas que aprendí a lo largo de los años sean de dibujo o de materiales🥰. Estoy abierta a recibir comisiones ahí hablamos y se cotiza.😉 #autistic #autismofemenino #autismoadulto #artista #artistaautodidacta #artistatradicional #artistadigital #presentacion

[guardianasdelrpg]

No estoy de acuerdo con el robo qué se hizo, me parece terrible que alguien cobre por una skin y luego no la entregue. Sin embargo, siempre hay mucho odio a la gente que hace diseños o que codes soluciones, como si fuera su culpa saber. Puedes decir mil cosas de Necro, pero resuelve más dudas que foroactivo y lo hace con las mejores intenciones, tiene tutoriales y vende skins porque llevan su tiempo. Quieres algo mejor? Paga algo mejor, pero no te sorprendas cuando te digan que sale entre 30 y 50 euros la hora y que una skin lleva entre 15 y 30 horas.

Muchas veces se señala a los diseñadores de que les faltan cosas, que sus diseños son repetitivos, que no te explican qué hacer, etc. No se les ocurrió que tal vez es lo que saben hacer y aun así, con lo que saben hacer, están tratando de ayudar a otros?? Perdón, pero no está bien lo que le hicieron a Niku, pero el hate que le tienen a diseñadores me suena a envidia porque saben resolver cosas que otros no.

Entonces, miren el vaso medio lleno en vez del medio vacío. Tengan un poco de empatia por la persona que posiblemente recibe mensajes pasivo agresivos y agresivos al menos una vez al mes y comprendan que no siempre se va a poder reaccionar de la mejor manera porque somos humanos y esto es un hobbie.

Necro siempre tiene asks de dudas y consultas en su tumblr y ayuda a todos en la medida de lo que puede. Eso es muy cierto. Al César lo que es del César.

Ahri ❤️

[angeldecuir]

Illustration By Drew Millward

Visit my blog for more inspiration 

[msrlunatj]

Cómo Crear un Portafolio de Proyectos de Programación

Introducción

Un portafolio de proyectos de programación es una herramienta crucial para mostrar tus habilidades y experiencia a potenciales empleadores o clientes. Es tu oportunidad de destacar tus logros, demostrar tus habilidades prácticas y dar una visión clara de lo que puedes ofrecer como desarrollador. En este blog, te guiaremos a través del proceso de construcción y presentación de un portafolio efectivo.

1. ¿Por Qué Necesitas un Portafolio?

Un portafolio bien diseñado puede:

Mostrar tu Experiencia: Permite a los empleadores ver ejemplos concretos de tu trabajo.

Destacar tus Habilidades: Muestra tus habilidades técnicas y tu capacidad para resolver problemas.

Demostrar tu Creatividad: Ofrece una visión de tu estilo y enfoque en el desarrollo de proyectos.

2. Componentes Clave de un Portafolio de Programación

a) Página de Inicio

Presentación Breve: Incluye una introducción breve sobre quién eres, tu experiencia y tus objetivos profesionales.

Foto Profesional: Una foto tuya puede humanizar tu portafolio y hacerlo más personal.

b) Proyectos Destacados

Descripción del Proyecto: Incluye una breve descripción del proyecto, el problema que resolviste y las tecnologías que utilizaste.

Demostración: Agrega capturas de pantalla, videos o enlaces a las aplicaciones en funcionamiento.

Código Fuente: Proporciona enlaces a los repositorios de código (por ejemplo, GitHub) para que los empleadores puedan revisar tu código.

Retos y Soluciones: Explica cualquier desafío que enfrentaste y cómo lo resolviste.

c) Experiencia y Educación

Resumen de Experiencia: Detalla tu experiencia laboral y proyectos relevantes.

Educación y Certificaciones: Incluye tu formación académica y cualquier certificación relevante que hayas obtenido.

d) Habilidades Técnicas

Lenguajes de Programación y Herramientas: Enumera los lenguajes de programación, frameworks y herramientas con los que estás familiarizado.

Competencias Adicionales: Incluye habilidades complementarias, como el control de versiones o el desarrollo ágil.

e) Blog o Sección de Artículos

Publicaciones Relevantes: Comparte artículos, tutoriales o reflexiones sobre temas de programación.

Actualizaciones: Mantén tu blog actualizado con nuevos aprendizajes y experiencias.

f) Información de Contacto

Formas de Contacto: Asegúrate de incluir formas de contacto, como tu correo electrónico, LinkedIn y otros perfiles profesionales.

Formulario de Contacto: Ofrece un formulario para facilitar la comunicación directa.

3. Cómo Construir tu Portafolio

a) Elegir la Plataforma

Construcción desde Cero: Utiliza HTML, CSS y JavaScript para construir un portafolio personalizado.

Herramientas y Servicios: Considera usar servicios como GitHub Pages, Netlify, o plataformas como Wix o WordPress.

b) Diseño y Usabilidad

Diseño Limpio y Profesional: Mantén un diseño limpio y profesional que facilite la navegación.

Responsive Design: Asegúrate de que tu portafolio sea accesible desde dispositivos móviles y de escritorio.

Accesibilidad: Considera la accesibilidad para usuarios con discapacidades.

c) Mantenimiento y Actualización

Actualiza Regularmente: Añade nuevos proyectos y actualiza tu portafolio con tus últimos logros y habilidades.

Revisión Continua: Revisa y ajusta tu portafolio para corregir errores y mejorar su contenido y presentación.

4. Ejemplos de Portafolios Exitosos

Aquí hay algunos ejemplos para inspirarte:

Portafolio de Tim Smith

Portafolio de John Doe (ejemplo ficticio)

5. Consejos Adicionales

Pide Retroalimentación: Comparte tu portafolio con amigos, mentores y colegas para obtener retroalimentación constructiva.

Optimiza para SEO: Utiliza buenas prácticas de SEO para mejorar la visibilidad de tu portafolio en motores de búsqueda.

Prepárate para Entrevistas: Tu portafolio será una herramienta clave durante las entrevistas técnicas, así que prepárate para hablar sobre los proyectos y decisiones que tomaste.

Conclusión

Crear un portafolio de proyectos de programación es una excelente manera de mostrar tus habilidades y experiencia a potenciales empleadores. Al incluir proyectos destacados, una descripción clara de tu experiencia y habilidades técnicas, y mantener tu portafolio actualizado, puedes destacar en el competitivo mundo de la programación. ¡Empieza hoy a construir tu portafolio y muestra al mundo lo que puedes hacer!